<!--
 * @Author: wanglianxin
 * @Date: 2023-06-16 10:54:19
 * @LastEditors: wanglianxin
 * @LastEditTime: 2023-08-22 16:23:13
 * @FilePath: \standard-check\src\components\CollectImages\CollectImagesTools\CollectImagesTools.vue
 * @Description: 采集图像工具列表
-->
<template>
  <div class="aside-tools">
    <ul :class="{ mediaScan: mediaScan }">
      <li
        v-for="(item, index) in list"
        :key="index"
        @click="handleClick(item.value)"
        :class="{
          noActive: clientConnectState !== 1 && item.value !== 'import',
          grey: item.disabled,
        }"
      >
        <!-- 正在获取设备时；正在导入时 -->
        <div v-if="!submitLoading || item.value !== 'submit'">
          <a-icon
            type="exclamation-circle"
            class="break-off"
            v-if="item.isBreak && clientConnectState !== 1 && item.value !== 'import'"
          />
          <p class="tool-icon">
            <a-icon v-if="!item.iconfont" :type="item.icon" />
            <i v-else :class="'iconfont icon' + item.icon"></i>
          </p>
          <p class="tool-name">{{ item.name }}</p>
        </div>
        <!-- 提交时加载遮罩层 -->
        <a-spin v-if="submitLoading && item.value === 'submit'" :indicator="indicator">
          <a-icon
            type="exclamation-circle"
            class="break-off"
            v-if="item.isBreak && clientConnectState !== 1"
          />
          <p class="tool-icon">
            <a-icon v-if="!item.iconfont" :type="item.icon" />
            <i v-else :class="'iconfont icon' + item.icon"></i>
          </p>
          <p class="tool-name">{{ item.name }}</p>
        </a-spin>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  components: {},
  props: {
    list: {
      default: () => [],
      type: Array,
    },
    pendingCount: {
      // 提取印鉴接口处于pending状态的数量
      type: Number,
      default: 0,
    },
    mediaScan: Boolean, //是否媒体查询
    isGetDeviceList: Boolean, //是否在获取设备
    isFirstCollect: Boolean,
    clientConnectState: Number, // 是否断联
    isSingle: Number, // 是否单张
    isImportScan: Boolean, //是否点击了扫描
    scanOnly: Boolean, //
  },
  data() {
    return {
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
    };
  },
  computed: {
    ...mapState('business', ['submitLoading']),
    ...mapState('imaging', ['configParams']),
  },
  methods: {
    handleClick(type) {
      if (this.submitLoading) return;
      this.$emit('change', type);
    },
  },
  watch: {},
};
</script>
<style lang="stylus" type="text/stylus" rel="stylesheet/stylus" scoped>
.aside-tools
  width 36px
  height 100%
  text-align center
  @media (max-height: 720px)
    .mediaScan
      li
        margin-bottom 0 !important
  @media (max-height: 650px)
    .mediaScan
      li
        margin-bottom 0 !important
        .tool-icon
          margin-bottom 0 !important
        p
          margin-bottom 0 !important
  @media (max-width: 900px)
    li
      margin-bottom 0 !important
  ul
    height 100%
    display flex
    align-items center
    // justify-content center
    flex-direction column
  .noActive
    cursor not-allowed
    &:hover
      color #4A4A4A
  .grey
    opacity 0.5
    cursor not-allowed
  li
    margin-bottom 16px
    cursor pointer
    position relative
    &:hover
      color #1890FF
    .break-off
      position absolute
      left -17px
      top 5px
      color #e38622
    .tool-icon
      font-size 24px
      margin-bottom 8px
      color #1890FF
    .tool-name
      font-size 12px
      line-height 16px
</style>
